<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-button icon="el-icon-circle-plus-outline" @click="addShow">添加餐桌</el-button>
      </div>
      <div class="item">
        时间段筛选
        <el-select v-model="timetype" placeholder="请选择时间段" @change="timetypeSearch">
          <el-option
            :key="0"
            label="2:00PM~4:00PM"
            :value="0"
          />
          <el-option
            v-for="item in timetypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入餐桌英文名">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
      <div class="item">
        <span>总共有{{ total }}条数据</span>
      </div>
    </div>

    <div class="grid">
      <div class="grid-item" v-for="(item,index) in list" :key="index">
        <el-image :src="domainName + item.image" style="width: 251px;height: 190px;border-radius: 10px;" fit="cover"></el-image>
        <div class="info">
          <div>{{item.title_zn}}({{item.title}})</div>
          <div>可坐人数: {{item.sitnum}} (人)</div>
          <div>状态: {{item.status == 0 ? '空桌' : item.status == 1 ? '未到场' : item.status == 2 ? '已到场': item.status == 3 ? '预定中' : '未知状态'}}</div>
        </div>

        <el-button @click="editShow(item)">编辑</el-button>
        <el-button @click="lookInfo($event)">查看预定信息</el-button>

        <div class="grid-pupop">
          <i class="el-icon-close icon" @click="closeInfo($event)"></i>
          <div class="r-info">
            <div class="ishave" v-if="item.dinorder">
              <div class="r-info-item">
                <div class="info-1">预定日期:{{item.dinorder.sitday}}</div>
                <div class="info-1">订单编号:{{item.dinorder.ordersn}}</div>
                <div class="info-1">预定人数:{{item.dinorder.pernum}}人</div>
                <div class="info-1">用户名称:{{item.dinorder.username}}</div>
                <div class="info-1">用户电话:{{item.dinorder.contact}}</div>
              </div>
            </div>
            <div class="none" v-else>
              暂无预定信息
            </div>
          </div>
        </div>
      </div>
    </div>

    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--列表数据添加/编辑开始  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" center width="95%" class="user">
      <el-form ref="ruleForm" :model="formRow" label-width="90px">
        <el-form-item label="餐桌主图">
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="doUploadImg"
            :show-file-list="false"
          >
            <img v-if="formRow.image" :src="domainName+(formRow.image)" class="avatar">
            <!-- <span v-else>选择餐桌主图</span> -->
            <img v-else src="../../../public/img/prod_img.png" />
          </el-upload>
        </el-form-item>
        <el-form-item label="餐桌英文名">
          <el-input v-model="formRow.title" auto-complete="off" />
        </el-form-item>
        <el-form-item label="餐桌中文名">
          <el-input v-model="formRow.title_zn" auto-complete="off" />
        </el-form-item>
        <el-form-item label="餐桌位数">
          <el-input type="number" v-model="formRow.sitnum" auto-complete="off" />
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { getDinList, dinAdd, dinEdit } from '@/api/din'
import { uploadImg, uploadImgs, getImgs } from '@/api/uploadImg'
import { getLevList } from '@/api/member'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Message } from 'element-ui'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import imgzip from 'imgzip'

export default {
  name: 'PordList',
  components: { Pagination, UploadExcelComponent },
  filters: {
    statusFilter(status) {
      if (status) {
        status = 'deleted'
      } else {
        status = 'published'
      }
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      cateList: [],
      modules: [], // 弹窗下拉框数据
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        timetype: 1
      },
      memberLevels: [], // 权限类型
      timetype: 0, // 搜索时间段
      searchcontent: '', // 搜索内容
      searchdate: '', // 搜索日期
      // 日期插件参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 弹窗标题
      dialogTitle: '',
      dialogFormVisible: false,
      dialogUploadVisible: false,
      dialogDiscountVisible: false,
      dialogImgVisible: false,
      // 表单数据
      cids: [],
      formRow: {
        image: '',
        title: '',
        title_zn: '',
        sitnum: ''
      },
      setProdId: '',
      // 多图片上传
      showImgData: [],
      dialogVisible: false,
      dialogImageUrl: '',
      // 域名
      domainName: process.env.VUE_APP_BASE_DOMAIN,
      timetypeList: [
        {value: 2,label: '4:00PM~6:00PM'},
        {value: 3,label: '6:00PM~8:00PM'},
        {value: 4,label: '8:00PM~10:00PM'}
      ]
    }
  },
  computed: {
    birthday: {
      get() {
        return new Date(Date.parse(this.formRow.birthday.replace(/-/g, '/')))
      },
      set(val) {
        this.formRow.birthday = val
      }
    },
    mprice: {
      get() {
        return this.formRow.mprice / 100
      },
      set(val) {
        this.formRow.mprice = val * 100
      }
    },
    rprice: {
      get() {
        return this.formRow.rprice / 100
      },
      set(val) {
        this.formRow.rprice = val * 100
      }
    },
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      const search = { searchcontent: this.searchcontent, timetype: this.timetype }
      if (this.searchdate) {
        const startDate = this.searchdate[0]
        const endDate = this.searchdate[1]
        search.startDate = startDate
        search.endDate = endDate
      }
      const postdata = { ...this.listQuery, ...search }
      getDinList(postdata).then((response) => {
        const { data } = response
        console.log(response, 'getProdList')
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    //就餐时间段搜索
    timetypeSearch(e) {
      this.timetype = e
      this.getList()
    },
    //查看基本预定信息
    lookInfo(e){
      e.currentTarget.nextSibling.style.transform='translateY(0)'
      e.currentTarget.nextSibling.style.opacity='1'
    },
    closeInfo(e){
      e.currentTarget.parentNode.style.transform='translateY(100%)'
      e.currentTarget.parentNode.style.opacity='0'
    },
    // 图片上传
    doUploadImg(params) {
      const compress = new imgzip({ quality: 0.5 })
      const _this = this
      // 调用图片压缩
      compress.photoCompress(params.file, function(base64) {
        const blob = imgzip.convertBase64UrlToBlob(base64)
        const formData = new FormData()
        formData.append('images', blob, 'file_' + Date.parse(new Date()) + '.jpg') // 文件对象
        // 上传操作....
        uploadImg(formData).then(response => {
          _this.formRow.image = response.data
        })
      })
    },
    doUploadImg1(params) {
      const compress = new imgzip({ quality: 0.5 })
      const _this = this
      // 调用图片压缩
      compress.photoCompress(params.file, function(base64) {
        const blob = imgzip.convertBase64UrlToBlob(base64)
        const formData = new FormData()
        formData.append('images', blob, 'file_' + Date.parse(new Date()) + '.jpg') // 文件对象
        // 上传操作....
        uploadImg(formData).then(response => {
          _this.formRow.content = response.data
        })
      })
    },
    // 表单提交方法
    submitForm(formName) {
      if (this.formRow.id) {
        // console.log(this.formRow, 'userEdit')
        dinEdit(this.formRow).then(res => { // 编辑餐桌
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.getList()
          this.dialogFormVisible = false
        })
      } else {
        dinAdd(this.formRow).then(res => { // 添加餐桌
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.getList()
          this.dialogFormVisible = false
        })
      }
    },

    // 添加
    addShow() {
      this.cids = []
      this.formRow = {
        image: '',
        title: '',
        title_zn: '',
        sitnum: ''
      }
      this.dialogTitle = '餐桌添加'
      this.dialogFormVisible = true
    },

    // 编辑
    editShow(row) {
      this.formRow = {
        id: row.id,
        image: row.image,
        title: row.title,
        title_zn: row.title_zn,
        sitnum: row.sitnum
      }
      this.dialogTitle = '餐桌编辑'
      this.dialogFormVisible = true
    },
    submitSet() {
      console.log('submitSet', this.memberLevels)
      let setData = {}
      for (let index = 0; index < this.memberLevels.length; index++) {
        setData[this.memberLevels[index].id] = Number(this.memberLevels[index].discount)
      }
      setData = JSON.stringify(setData)
      setProd({ proid: this.setProdId, discounts: setData }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '设置成功'
          })
          this.dialogDiscountVisible = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.avatar-uploader .el-upload {
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #E9F6FF;
  }
  .avatar-uploader .el-upload:hover{
    background-color: rgba($color: #E9F6FF, $alpha: 0.7);
  }

  .avatar-uploader .el-upload:hover .avatar-uploader-icon{
    color: rgba($color: #656B78, $alpha: 0.7);
  }
  .avatar-uploader-icon {
    // background-image: url(../../../public/images/headPortrait.png);
    font-size: 18px;
    color: #656B78;
    width: 53px;
    height: 53px;
    line-height: 53px;
    text-align: center;
  }
  .avatar {
    width: 100%;
  }

  .grid{
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    .grid-item{
      width: 291px;
      background: #FFFFFF;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #F1F0F0;
      border-radius: 3px;
      overflow: hidden;
      position: relative;
      .el-button{
        background-color: #E82F5F;
        color: #fff;
        font-size: 17px;
        font-weight: 500;
      }
      .el-image{
        height: 200px;
      }
      .info{
        margin-top: 10px;
        width: 100%;
        div{
          font-size: 17px;
          font-weight: 500;
          color: #333333;
          line-height: 29px;
        }
      }
      .grid-pupop{
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(100%);
        opacity: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
        transition: all 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
        .r-info{
          width: 251px;
          height: 228px;
          background: #FFFFFF;
          border: 1px solid #F1F0F0;
          opacity: 0.9;
          border-radius: 10px;
          .ishave{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            .r-info-item{
              .info-1{
                font-size: 17px;
                font-weight: 400;
                color: #333333;
                line-height: 29px;
              }
            }
          }
          .none{
            text-align: center;
            line-height: 228px;
            font-size: 17px;
            font-weight: 400;
            color: #333333;
          }
        }
        .icon{
          position: absolute;
          top: 20px;
          right: 20px;
          color: #fff;
          font-size: blod;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }
  }
</style>
